<template>
  <div>
     <h1>{{msg}}</h1>

    <hr>
    <div id="app">
       <el-form :rules="rules" :model="ruleForm" ref="ruleForm">
           <el-form-item label="账号" prop="username">
              <el-input type="text"  v-model="ruleForm.username" style="width: 400px"></el-input>
           </el-form-item>

           <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm.password" style="width: 400px"></el-input>
           </el-form-item>

           <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio value="0" label="男"/>
                <el-radio value="1" label="女"/>
              </el-radio-group>
           </el-form-item>
           <el-form-item>
               <el-button type="success" @click="fun('ruleForm')">提交</el-button>
               <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
           </el-form-item>
       </el-form>
    </div>

  </div>

</template>

<script>
export default {
  name: "Home",
  data(){
    return{
       msg: '首页',
      ruleForm:{
          username: '',
          password: '',
          sex: ''

      },

      rules:{
          username:[
            {required: true,message: '账号不能为空',trigger: 'blur'},
          ],
          password:[
            {required: true,message: '密码不能为空',trigger: 'blur'},
            {min:3,max:10,message: '长度必须在3-10之间',trigger: 'blur'}
          ],
          sex:[
            {required: true,trigger: 'change',message: '请选择性别'}
          ]
      }
    }
  },
  methods:{
    fun(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success("验证成功！")
        } else {
          this.$message.error("验证失败");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
  #app{
    width: 500px;
    margin: auto;
  }
</style>
